<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑客户信息</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5" style="max-width:500px;">
    <h2 class="mb-4">编辑客户信息</h2>
    <form th:action="@{/user/edit}" method="post">
        <input type="hidden" name="customerID" th:value="${user.customerID}" />
        <div class="mb-3">
            <label class="form-label">姓名</label>
            <input type="text" class="form-control" name="customerName" th:value="${user.customerName}" required />
        </div>
        <div class="mb-3">
            <label class="form-label">身份证号</label>
            <input type="text" class="form-control" name="pid" th:value="${user.pid}" required />
        </div>
        <div class="mb-3">
            <label class="form-label">电话</label>
            <input type="text" class="form-control" name="telephone" th:value="${user.telephone}" required maxlength="11" pattern="^\d{11}$" oninput="this.value=this.value.replace(/[^\\d]/g,'').slice(0,11)" id="telephone" placeholder="请输入11位手机号" />
            <div class="error-message" id="telError" style="display:none;"></div>
        </div>
        <div class="mb-3">
            <label class="form-label">地址</label>
            <input type="text" class="form-control" name="address" th:value="${user.address}" />
        </div>
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <a href="/user/list" class="btn btn-link">返回列表</a>
        </div>
    </form>
</div>
<script>
// 手机号实时校验
const telInput = document.getElementById('telephone');
const telError = document.getElementById('telError');
telInput.addEventListener('input', function() {
    if (!/^\d{11}$/.test(this.value)) {
        telError.textContent = '手机号必须为11位数字';
        telError.style.display = 'block';
        this.classList.add('is-invalid');
    } else {
        telError.textContent = '';
        telError.style.display = 'none';
        this.classList.remove('is-invalid');
    }
});
// 表单提交校验
const userForm = document.querySelector('form');
userForm.addEventListener('submit', function(e) {
    if (!/^\d{11}$/.test(telInput.value)) {
        e.preventDefault();
        telError.textContent = '手机号必须为11位数字';
        telError.style.display = 'block';
        telInput.classList.add('is-invalid');
        alert('请检查手机号格式！');
    }
});
</script>
</body>
</html> 